<template>
	<!-- 分享海报 弹出层 -->
	<zan-popup :show="showPopup" @close="closePosterPopup">
		<view class="pop-poster pop-example__container">
			<!-- 关闭按钮 -->
			<view class="pop-close dis-flex flex-x-center flex-y-center" @tap.stop.prevent="closePosterPopup">
				<text class="iconfont icon-shanchu f-30 col-9"></text>
			</view>
			<view class="poster__image">
				<image mode="widthFix" :src="url"></image>
			</view>
			<!-- #ifdef H5 -->
			<view class="m-top20 t-c col-9 f-28">长按保存图片到本地</view>
			<!-- #endif -->
			<!-- #ifndef H5 -->
			<view class="poster__tips m-top10 t-c"></view>
			<view class="padding-box m-top10 profile-btn">
				<button @tap.stop.prevent="onSaveImage" :data-url="url">保存图片</button>
			</view>
			<!-- #endif -->
		</view>
	</zan-popup>
</template>

<script>
	import zanPopup from "@/components/popup/index";
	const app = getApp();
	export default {
		name: "sharePoster",
		model: {
			prop: 'isShow',
			event: 'closePosterPopup'
		},
		props: {
			isShow: {
				type: Boolean,
				default: false
			},
			// 海报类型 goods\order
			type: {
				type: String,
				default: 'goods'
			},
			// goodsId 或 orderId
			id: {
				default: ''
			}

		},
		watch: {
			isShow(val) {
				if (val) {
					if (this.type == 'goods') {
						this._showPoster();
					} else {
						this._showOrderPoster();
					}

				} else {
					this.showPopup = false;
				}
			}
		},
		components: {
			zanPopup,
		},
		data() {
			return {
				// 商品海报
				showPopup: false,
				url: ''
			};
		},
		methods: {

			/**
			 * 关闭商品海报
			 */
			closePosterPopup() {
				this.$emit('closePosterPopup', false)
			},

			/**
			 * 显示商品海报图
			 */
			_showPoster() {
				uni.showLoading({
					title: '加载中'
				});
				let param = {
					goods_id: this.id
				}
				// #ifdef MP
				param.is_applet = 1;
				// #endif
				app._get('goods/poster', param, result => {
					this.setData({
						"url": result.data.qrcode
					}, () => {
						this.showPopup = true;
					});
				}, null, () => {
					uni.hideLoading();
				});
			},

			/**
			 * 显示订单商品海报图
			 */
			_showOrderPoster() {
				let _this = this;

				uni.showLoading({
					title: '加载中'
				});
				let param = {
					order_id: this.id
				};
				// #ifdef MP
				param.is_applet = 1;
				// #endif
				app._get('order/poster', param, result => {
					_this.setData({
						"url": result.data.qrcode
					}, () => {
						this.showPopup = true;
					});
				}, null, () => {
					uni.hideLoading();
				});
			},


			/**
			 * 保存海报图片
			 */
			onSaveImage(e) {
				let _this = this;

				let url = e.currentTarget.dataset.url;;
				uni.showLoading({
					title: '加载中'
				}); // 下载海报图片

				uni.downloadFile({
					url: url,
					success(res) {
						uni.hideLoading(); // 图片保存到本地

						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,

							success(data) {
								uni.showToast({
									title: '保存成功',
									icon: 'success',
									duration: 2000
								});

								// 关闭商品分享海报
								if (_this.showPopup) {
									_this.closePosterPopup()
								}
							},

							fail(err) {
								console.log(err.errMsg);

								if (err.errMsg === 'saveImageToPhotosAlbum:fail auth deny') {
									uni.showToast({
										title: "请允许访问相册后重试",
										icon: "none",
										duration: 1000
									});
									setTimeout(() => {
										uni.openSetting();
									}, 1000);
								}
							},

							complete(res) {
								console.log('complete'); // wx.hideLoading();
							}

						});
					}

				});
			}
		}
	}
</script>

<style lang="scss">
	@import '../../utils/pop-poster.scss';
</style>
